<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title>注册</title>
    <link rel="stylesheet" th:href="@{/css/pintuer.css}">
    <link rel="stylesheet" th:href="@{/css/admin.css}">
    <script th:src="@{/js/jquery-1.6.4.min.js}"></script>
    <script th:src="@{/js/pintuer.js}"></script>
    <script th:src="@{/js/jquery.serializejson.min.js}"></script>
    <script>

        $("#usersname").blur(function (e) {
            e.preventDefault();
            $.ajax({
                url: "/userNameVerify",
                type: "POST",
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify($("#usersname").serializeJSON()),
                function(data) {
                    if (data.result == true) {
                        alert("用户名可用！")
                        $(".errorMsg").text("用户名可用！");
                    } else {
                        alert("注册失败");
                        $(".errorMsg").text("用户名已存在！");
                    }
                }
            });

        });
    </script>
</head>
<body>
<div class="bg"></div>
<div class="container">
    <div class="line bouncein">
        <div class="xs6 xm4 xs3-move xm4-move">
            <div style="height:150px;"></div>
            <div class="media media-y margin-big-bottom">
            </div>
            <form action="register" method="post">
                <div class="panel loginbox">
                    <div class="text-center margin-big padding-big-top"><h1>注册中心</h1></div>
                    <sapn class="errorMsg" style="color: #00aa00">
                        <!--dddd ${requestScope.msg}-->
                    </sapn>
                    <div class="panel-body" style="padding:30px; padding-bottom:10px; padding-top:10px;">
                        <div class="form-group">
                            <div class="field field-icon-right">
                                <input type="text" class="input input-big" name="name" id="usersname" placeholder="注册账号"
                                       data-validate="required:请填写账号"/>
                                <span class="icon icon-user margin-small"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="field field-icon-right">
                                <input type="password" class="input input-big" name="password" id="password"
                                       placeholder="注册密码"
                                       data-validate="required:请填写密码"/>
                                <span class="icon icon-key margin-small"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="field">
                                <input type="text" class="input input-big" name="code" placeholder="填写右侧的验证码"
                                       data-validate="required:请填写右侧的验证码"/>
                                <img th:src="@{/defaultKaptcha}" alt="" width="100" height="32" class="passcode"
                                     style="height:43px;cursor:pointer;" onclick="this.src=this.src+'?'">

                            </div>
                        </div>
                    </div>
                    <div style="padding:30px;"><input type="submit"
                                                      class="button button-block bg-main text-big input-big" value="注册">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

</body>
</html>